<template>
    <div>
        <h2>房型添加</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房屋名称</td>
                    <td>
                        <input type="text" v-model="query.houseTypeName">
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="query.photo" alt="" width="100" height="100" v-if="query.photo!=''">
                    </td>
                </tr>
                <tr>
                    <td>房型面积</td>
                    <td>
                        <input type="text" v-model="query.area" >
                    </td>
                </tr>
                <tr>
                    <td>是否有窗</td>
                    <td>
                        <input type="radio" name="iswindow" value="1" v-model="query.isWindow" >有窗
                        <input type="radio" name="iswindow" value="0" v-model="query.isWindow">无窗
                    </td>
                </tr>
                <tr>
                    <td>入住人数</td>
                    <td>
                        <input type="text" v-model="query.count" >
                    </td>
                </tr>
                <tr>
                    <td>房型价格</td>
                    <td>
                        <input type="text" v-model="query.price">
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" name="State" value="1" v-model="query.state">上架
                        <input type="radio" name="State" value="0" v-model="query.state">下架
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-primary" @click="add">
                    </td>
                </tr>
            </tbody>
        </table>

        



    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,reactive,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import moment from 'moment';
const route=useRoute();
const router=useRouter();


const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        method:'post',
        url:'/api/UpFile/UpLoad',
        data:f,
    })
    .then(res=>{
        console.log(res);
        query.photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const query=reactive({
  "houseTypeName": "",
  "photo": "",
  "area": '',
  "isWindow": '',
  "count": '',
  "price": '',
  "state": '',
})
const add=()=>{
    axios({
        url:'/api/House/HouseAdd',
        method:'post',
        data:query,
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert("房型名称不能重复");
            return;
        }
        if(res.data>0){
            alert("添加成功");
        }
        else{
            alert("添加失败");
        }
    })
    .catch(err=>{
        console.log(err);
    })
}

</script>

<style scoped>

</style>